<html><head>
<script src="../lib/jit.js" type="text/javascript" />
<script type="text/javascript">
var testTree = {
	id: "a",
	name: "Node A",
	data: {},
	children: [	{
		id: "b",
		name: "Node B",
		data: {},
		children: []
	},
	{
		id: "c",
		name: "Node C",
		data: {},
		children: [	{
			id: "d",
			name: "Node D",
			data: {},
			children: []
		}
		]
	}
	]
};

function init() {
	// console.log("Initializing tree display"); // TODO this is firebug-specific
	var graphdiv = document.getElementById('graph');
	var w = 800, h = 500; // TODO div.offsetwidth?
	var canvas = new Canvas('mycanvas', {
		'injectInto': 'graph',
		'width': w,
		'height': h,
		'backgroundColor': '#ffffff'
	});

	var graphConfig = {
		duration: 800,         //set duration for the animation
		transition: Trans.Quart.easeInOut,         //set animation transition type
		levelDistance: 50,         //set distance between node and its children
		Node: {
			height: 30,
			width: 100,
			type: 'rectangle',
			color: '#ccc',
			overridable: true
		},
		Edge: {
			type: 'bezier',
			overridable: true
		},
		onCreateLabel: function(label, node){  
         label.id = node.id;              
         label.innerHTML = node.name;  
         label.onclick = function(){  
             st.onClick(node.id);  
        };  
         //set label styles  
         var style = label.style;  
         style.width = 60 + 'px';  
         style.height = 17 + 'px';              
         style.cursor = 'pointer';  
         style.color = '#333';  
         style.fontSize = '0.8em';  
         style.textAlign= 'center';  
         style.paddingTop = '3px';  
     }
	};

	var st = new ST(canvas, graphConfig);
	
	st.loadJSON(testTree);
	st.compute();     //compute node positions and layout
	st.onClick(st.root);     //emulate a click on the root node.
}

window.addEventListener("load", init, false); // TODO probably use gadgets.util.registerOnLoadHandler(init);
</script></head>
<body>
<div id="graph" style="width:100%; height:600px;"></div>
</body>
</html>